<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Android/Flutter 开发系统知识</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        :root {
            --primary-color: #FF6B6B;
            --secondary-color: #4ECDC4;
            --text-primary: #2C3E50;
            --text-secondary: #7F8C8D;
            --bg-primary: #FFFFFF;
            --bg-secondary: #F8F9FA;
            --border-color: #E9ECEF;
            --shadow: 0 2px 10px rgba(0,0,0,0.1);
            --shadow-hover: 0 4px 20px rgba(0,0,0,0.15);
        }

        [data-theme="dark"] {
            --text-primary: #ECF0F1;
            --text-secondary: #BDC3C7;
            --bg-primary: #2C3E50;
            --bg-secondary: #34495E;
            --border-color: #4A5568;
            --shadow: 0 2px 10px rgba(0,0,0,0.3);
            --shadow-hover: 0 4px 20px rgba(0,0,0,0.4);
        }

        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;
            background: var(--bg-primary);
            color: var(--text-primary);
            line-height: 1.6;
            overflow-x: hidden;
        }

        .container {
            max-width: 375px;
            margin: 0 auto;
            min-height: 100vh;
            background: var(--bg-primary);
            position: relative;
        }

        /* 头部导航 */
        .header {
            background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
            padding: 20px;
            text-align: center;
            color: white;
            position: sticky;
            top: 0;
            z-index: 100;
            box-shadow: var(--shadow);
        }

        .header h1 {
            font-size: 24px;
            font-weight: 600;
            margin-bottom: 8px;
        }

        .header p {
            font-size: 14px;
            opacity: 0.9;
        }

        .theme-toggle {
            position: absolute;
            top: 20px;
            right: 20px;
            background: rgba(255,255,255,0.2);
            border: none;
            border-radius: 50%;
            width: 40px;
            height: 40px;
            color: white;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.3s ease;
        }

        .theme-toggle:hover {
            background: rgba(255,255,255,0.3);
            transform: scale(1.1);
        }

        /* 主内容区域 */
        .main-content {
            padding: 20px;
        }

        /* 知识框架卡片 */
        .framework-section {
            margin-bottom: 30px;
        }

        .section-title {
            font-size: 20px;
            font-weight: 600;
            margin-bottom: 15px;
            color: var(--text-primary);
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .section-icon {
            width: 24px;
            height: 24px;
            background: var(--primary-color);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-size: 12px;
        }

        .framework-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 15px;
            margin-bottom: 20px;
        }

        .framework-card {
            background: var(--bg-secondary);
            border-radius: 12px;
            padding: 20px;
            text-align: center;
            cursor: pointer;
            transition: all 0.3s ease;
            border: 2px solid transparent;
            position: relative;
            overflow: hidden;
        }

        .framework-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
            transition: left 0.5s ease;
        }

        .framework-card:hover::before {
            left: 100%;
        }

        .framework-card:hover {
            transform: translateY(-5px);
            box-shadow: var(--shadow-hover);
            border-color: var(--primary-color);
        }

        .framework-card.active {
            border-color: var(--primary-color);
            background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
            color: white;
        }

        .framework-icon {
            font-size: 32px;
            margin-bottom: 10px;
            display: block;
        }

        .framework-title {
            font-size: 16px;
            font-weight: 600;
            margin-bottom: 5px;
        }

        .framework-desc {
            font-size: 12px;
            opacity: 0.8;
        }

        .framework-stats {
            display: flex;
            justify-content: space-between;
            margin-top: 10px;
            font-size: 11px;
        }

        /* 知识树 */
        .knowledge-tree {
            background: var(--bg-secondary);
            border-radius: 12px;
            padding: 20px;
            margin-top: 15px;
            display: none;
        }

        .knowledge-tree.active {
            display: block;
            animation: fadeIn 0.3s ease;
        }

        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(10px); }
            to { opacity: 1; transform: translateY(0); }
        }

        .tree-node {
            margin-bottom: 15px;
            padding: 12px;
            background: var(--bg-primary);
            border-radius: 8px;
            border-left: 4px solid var(--primary-color);
            cursor: pointer;
            transition: all 0.3s ease;
        }

        .tree-node:hover {
            transform: translateX(5px);
            box-shadow: var(--shadow);
        }

        .tree-node-title {
            font-weight: 600;
            margin-bottom: 5px;
            color: var(--text-primary);
        }

        .tree-node-desc {
            font-size: 12px;
            color: var(--text-secondary);
        }

        .tree-node-stats {
            display: flex;
            justify-content: space-between;
            margin-top: 8px;
            font-size: 11px;
            color: var(--text-secondary);
        }

        /* 问答模块 */
        .qa-section {
            margin-top: 30px;
        }

        .qa-controls {
            display: flex;
            gap: 10px;
            margin-bottom: 20px;
        }

        .qa-btn {
            flex: 1;
            padding: 12px;
            border: none;
            border-radius: 8px;
            background: var(--bg-secondary);
            color: var(--text-primary);
            cursor: pointer;
            transition: all 0.3s ease;
            font-weight: 500;
        }

        .qa-btn.active {
            background: var(--primary-color);
            color: white;
        }

        .qa-btn:hover {
            transform: translateY(-2px);
            box-shadow: var(--shadow);
        }

        .question-list {
            max-height: 400px;
            overflow-y: auto;
        }

        .question-item {
            background: var(--bg-secondary);
            border-radius: 12px;
            margin-bottom: 15px;
            overflow: hidden;
            transition: all 0.3s ease;
            border: 2px solid transparent;
        }

        .question-item:hover {
            transform: translateY(-2px);
            box-shadow: var(--shadow);
        }

        .question-header {
            padding: 15px;
            cursor: pointer;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .question-title {
            font-weight: 600;
            color: var(--text-primary);
            flex: 1;
            margin-right: 10px;
        }

        .question-type {
            background: var(--primary-color);
            color: white;
            padding: 4px 8px;
            border-radius: 12px;
            font-size: 11px;
            margin-right: 10px;
        }

        .question-actions {
            display: flex;
            gap: 5px;
        }

        .action-btn {
            width: 30px;
            height: 30px;
            border: none;
            border-radius: 50%;
            background: var(--bg-primary);
            color: var(--text-secondary);
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.3s ease;
        }

        .action-btn:hover {
            background: var(--primary-color);
            color: white;
            transform: scale(1.1);
        }

        .action-btn.favorited {
            background: var(--primary-color);
            color: white;
        }

        .question-answer {
            padding: 0 15px 15px;
            color: var(--text-secondary);
            font-size: 14px;
            line-height: 1.5;
            display: none;
        }

        .question-answer.show {
            display: block;
            animation: slideDown 0.3s ease;
        }

        @keyframes slideDown {
            from { opacity: 0; max-height: 0; }
            to { opacity: 1; max-height: 200px; }
        }

        /* 收藏列表 */
        .favorites-list {
            display: none;
        }

        .favorites-list.active {
            display: block;
        }

        .favorite-item {
            background: var(--bg-secondary);
            border-radius: 12px;
            padding: 15px;
            margin-bottom: 10px;
            border-left: 4px solid var(--secondary-color);
            transition: all 0.3s ease;
        }

        .favorite-item:hover {
            transform: translateX(5px);
            box-shadow: var(--shadow);
        }

        .favorite-title {
            font-weight: 600;
            margin-bottom: 5px;
            color: var(--text-primary);
        }

        .favorite-answer {
            font-size: 14px;
            color: var(--text-secondary);
            margin-bottom: 10px;
        }

        .favorite-actions {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .favorite-date {
            font-size: 11px;
            color: var(--text-secondary);
        }

        .remove-favorite {
            background: #E74C3C;
            color: white;
            border: none;
            padding: 5px 10px;
            border-radius: 6px;
            font-size: 11px;
            cursor: pointer;
            transition: all 0.3s ease;
        }

        .remove-favorite:hover {
            background: #C0392B;
            transform: scale(1.05);
        }

        /* 空状态 */
        .empty-state {
            text-align: center;
            padding: 40px 20px;
            color: var(--text-secondary);
        }

        .empty-icon {
            font-size: 48px;
            margin-bottom: 15px;
            opacity: 0.5;
        }

        .empty-text {
            font-size: 16px;
            margin-bottom: 10px;
        }

        .empty-desc {
            font-size: 14px;
            opacity: 0.8;
        }

        /* 响应式设计 */
        @media (max-width: 375px) {
            .container {
                max-width: 100%;
            }
            
            .framework-grid {
                grid-template-columns: 1fr;
            }
            
            .qa-controls {
                flex-direction: column;
            }
        }

        /* 滚动条样式 */
        ::-webkit-scrollbar {
            width: 6px;
        }

        ::-webkit-scrollbar-track {
            background: var(--bg-secondary);
            border-radius: 3px;
        }

        ::-webkit-scrollbar-thumb {
            background: var(--primary-color);
            border-radius: 3px;
        }

        ::-webkit-scrollbar-thumb:hover {
            background: var(--secondary-color);
        }

        /* 加载动画 */
        .loading {
            display: flex;
            justify-content: center;
            align-items: center;
            padding: 20px;
        }

        .loading-spinner {
            width: 20px;
            height: 20px;
            border: 2px solid var(--border-color);
            border-top: 2px solid var(--primary-color);
            border-radius: 50%;
            animation: spin 1s linear infinite;
        }

        @keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }
    </style>
</head>
<body>
    <div class="container">
        <!-- 头部导航 -->
        <header class="header">
            <button class="theme-toggle" onclick="toggleTheme()">🌙</button>
            <h1>开发系统知识</h1>
            <p>Android & Flutter 知识体系</p>
        </header>

        <!-- 主内容 -->
        <main class="main-content">
            <!-- 知识框架部分 -->
            <section class="framework-section">
                <h2 class="section-title">
                    <span class="section-icon">📚</span>
                    系统知识框架
                </h2>
                
                <div class="framework-grid">
                    <div class="framework-card" onclick="selectFramework('android')">
                        <span class="framework-icon">🤖</span>
                        <div class="framework-title">Android</div>
                        <div class="framework-desc">系统架构与开发</div>
                        <div class="framework-stats">
                            <span>25个模块</span>
                            <span>138题</span>
                        </div>
                    </div>
                    
                    <div class="framework-card" onclick="selectFramework('flutter')">
                        <span class="framework-icon">🎯</span>
                        <div class="framework-title">Flutter</div>
                        <div class="framework-desc">跨平台开发框架</div>
                        <div class="framework-stats">
                            <span>8个模块</span>
                            <span>50题</span>
                        </div>
                    </div>
                </div>

                <!-- Android 知识树 -->
                <div class="knowledge-tree" id="android-tree">
                    <div class="tree-node" onclick="showQuestions('android', 'framework')">
                        <div class="tree-node-title">Framework 层</div>
                        <div class="tree-node-desc">AMS、WMS、PMS 等系统服务</div>
                        <div class="tree-node-stats">
                            <span>6个模块</span>
                            <span>45题</span>
                        </div>
                    </div>
                    
                    <div class="tree-node" onclick="showQuestions('android', 'handler')">
                        <div class="tree-node-title">Handler 机制</div>
                        <div class="tree-node-desc">线程通信与消息处理</div>
                        <div class="tree-node-stats">
                            <span>1个模块</span>
                            <span>25题</span>
                        </div>
                    </div>
                    
                    <div class="tree-node" onclick="showQuestions('android', 'binder')">
                        <div class="tree-node-title">Binder 通信</div>
                        <div class="tree-node-desc">进程间通信机制</div>
                        <div class="tree-node-stats">
                            <span>1个模块</span>
                            <span>15题</span>
                        </div>
                    </div>
                    
                    <div class="tree-node" onclick="showQuestions('android', 'optimization')">
                        <div class="tree-node-title">性能优化</div>
                        <div class="tree-node-desc">内存、启动、卡顿优化</div>
                        <div class="tree-node-stats">
                            <span>5个模块</span>
                            <span>30题</span>
                        </div>
                    </div>
                    
                    <div class="tree-node" onclick="showQuestions('android', 'jetpack')">
                        <div class="tree-node-title">Jetpack 组件</div>
                        <div class="tree-node-desc">现代 Android 开发架构</div>
                        <div class="tree-node-stats">
                            <span>3个模块</span>
                            <span>23题</span>
                        </div>
                    </div>
                </div>

                <!-- Flutter 知识树 -->
                <div class="knowledge-tree" id="flutter-tree">
                    <div class="tree-node" onclick="showQuestions('flutter', 'dart')">
                        <div class="tree-node-title">Dart 语言基础</div>
                        <div class="tree-node-desc">语法、异步、类型系统</div>
                        <div class="tree-node-stats">
                            <span>3个模块</span>
                            <span>20题</span>
                        </div>
                    </div>
                    
                    <div class="tree-node" onclick="showQuestions('flutter', 'widget')">
                        <div class="tree-node-title">Widget 体系</div>
                        <div class="tree-node-desc">组件化开发与状态管理</div>
                        <div class="tree-node-stats">
                            <span>2个模块</span>
                            <span>15题</span>
                        </div>
                    </div>
                    
                    <div class="tree-node" onclick="showQuestions('flutter', 'rendering')">
                        <div class="tree-node-title">渲染机制</div>
                        <div class="tree-node-desc">三棵树、Skia 引擎</div>
                        <div class="tree-node-stats">
                            <span>1个模块</span>
                            <span>8题</span>
                        </div>
                    </div>
                    
                    <div class="tree-node" onclick="showQuestions('flutter', 'performance')">
                        <div class="tree-node-title">性能优化</div>
                        <div class="tree-node-desc">启动、渲染、内存优化</div>
                        <div class="tree-node-stats">
                            <span>2个模块</span>
                            <span>7题</span>
                        </div>
                    </div>
                </div>
            </section>

            <!-- 问答模块 -->
            <section class="qa-section">
                <h2 class="section-title">
                    <span class="section-icon">❓</span>
                    知识问答
                </h2>
                
                <div class="qa-controls">
                    <button class="qa-btn active" onclick="showQAMode('questions')">全部题目</button>
                    <button class="qa-btn" onclick="showQAMode('favorites')">我的收藏</button>
                </div>

                <!-- 题目列表 -->
                <div class="question-list" id="question-list">
                    <!-- 动态生成题目 -->
                </div>

                <!-- 收藏列表 -->
                <div class="favorites-list" id="favorites-list">
                    <!-- 动态生成收藏 -->
                </div>
            </section>
        </main>
    </div>

    <script>
        // 全局状态
        let currentFramework = null;
        let currentQAMode = 'questions';
        let favorites = JSON.parse(localStorage.getItem('favorites') || '[]');
        let questions = [];

        // 模拟数据
        const mockQuestions = {
            android: {
                framework: [
                    {
                        id: 1,
                        type: "简答题",
                        question: "Handler 在 Android 中的作用是什么，如何实现线程间通信？",
                        answer: "Handler 用于在 Android 中实现线程间通信，主要负责将信息从子线程传递到主线程。它通过消息队列（MessageQueue）和消息循环（Looper）机制将消息调度和处理。子线程将任务封装成 Message，通过 Handler 发送到主线程的 MessageQueue 上，由主线程的 Looper 处理并执行消息的 Runnable 对象。"
                    },
                    {
                        id: 2,
                        type: "简答题", 
                        question: "Handler 的工作原理是什么，背后涉及哪些组件？",
                        answer: "Handler 的工作原理主要基于 Looper、MessageQueue 和 Message 三个组件。Looper 负责管理线程的消息循环，MessageQueue 存储所有待处理的消息，而 Handler 用于发送和处理这些消息。Handler 通过 Looper 将消息放入 MessageQueue，并从中获取消息，分发到对应的 handlerMessage() 方法中处理。"
                    },
                    {
                        id: 3,
                        type: "简答题",
                        question: "什么是消息队列（MessageQueue），如何在 Handler 中使用？",
                        answer: "MessageQueue 是 Handler 机制中的一个队列结构，用于存储待处理的消息。每个线程有且仅有一个 MessageQueue，它通过 Looper 进行循环检查，如果有消息，就取出消息并交由 Handler 处理。开发者通常不直接操作 MessageQueue，而是通过 Handler 的 post 或 send 方法控制消息的入列和处理。"
                    }
                ],
                handler: [
                    {
                        id: 4,
                        type: "简答题",
                        question: "Looper 是如何在 Handler 中工作的，主线程如何关联一个 Looper？",
                        answer: "Looper 是一个管理消息循环和分发的类，它的 loop() 方法在不断检查 MessageQueue 中是否有新消息需要处理。主线程通过调用 `Looper.prepareMainLooper()` 来初始化主线程的 Looper，通常在应用启动时被调用，Looper 在主线程中已自动关联，无需额外操作。"
                    },
                    {
                        id: 5,
                        type: "简答题",
                        question: "为什么子线程中使用 Handler 需要手动调用 Looper.prepare() 和 Looper.loop()？",
                        answer: "因为子线程默认不创建 Looper，需要手动调用 `Looper.prepare()` 初始化 Looper 并调用 `Looper.loop()` 启动消息循环。这样，子线程才能拥有一个事件循环来处理 MessageQueue 中的消息，实现和主线程间的通信。"
                    }
                ]
            },
            flutter: {
                dart: [
                    {
                        id: 6,
                        type: "简答题",
                        question: "什么是 Flutter？列举其核心优势。",
                        answer: "Flutter 是 Google 开发的开源跨平台 UI 框架，使用 Dart 语言构建高性能应用。核心优势包括：跨平台开发（iOS/Android/Web/桌面）、自绘 UI 引擎（Skia 渲染）、热重载快速开发、丰富的组件库（Material/Cupertino）、高性能（AOT 编译）。"
                    },
                    {
                        id: 7,
                        type: "简答题",
                        question: "Dart 是强类型语言还是弱类型语言？如何支持类型推断？",
                        answer: "Dart 是强类型语言，支持类型推断。使用 `var` 声明变量时，Dart 根据赋值自动推导类型（如 `var name = 'Flutter'` 推导为 String）。动态类型需显式声明 `dynamic`，运行时进行类型检查。"
                    },
                    {
                        id: 8,
                        type: "简答题",
                        question: "StatelessWidget 和 StatefulWidget 的主要区别是什么？",
                        answer: "StatelessWidget 不可变，用于静态 UI（如文本/图片）；StatefulWidget 通过关联的 State 对象管理动态状态（如计数器）。后者在 UI 需响应数据变化或用户交互时使用。"
                    }
                ],
                widget: [
                    {
                        id: 9,
                        type: "简答题",
                        question: "解释 Dart 中的 `Future` 和 `async/await` 的作用。",
                        answer: "`Future` 表示异步操作的结果，`async` 标记异步函数，`await` 等待异步操作完成。例如网络请求时，`await http.get(url)` 暂停执行直到返回数据，避免回调嵌套。"
                    },
                    {
                        id: 10,
                        type: "简答题",
                        question: "Flutter 如何与原生平台（Android/iOS）通信？列举三种 Channel 类型。",
                        answer: "通过 Platform Channel 通信，类型包括：1. MethodChannel（方法调用）；2. BasicMessageChannel（基础消息传递）；3. EventChannel（事件流监听）。例如调用摄像头使用 MethodChannel。"
                    }
                ]
            }
        };

        // 初始化
        document.addEventListener('DOMContentLoaded', function() {
            loadTheme();
            updateFavoritesDisplay();
        });

        // 主题切换
        function toggleTheme() {
            const body = document.body;
            const currentTheme = body.getAttribute('data-theme');
            const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
            
            body.setAttribute('data-theme', newTheme);
            localStorage.setItem('theme', newTheme);
            
            const themeBtn = document.querySelector('.theme-toggle');
            themeBtn.textContent = newTheme === 'dark' ? '☀️' : '🌙';
        }

        // 加载主题
        function loadTheme() {
            const savedTheme = localStorage.getItem('theme') || 'light';
            document.body.setAttribute('data-theme', savedTheme);
            const themeBtn = document.querySelector('.theme-toggle');
            themeBtn.textContent = savedTheme === 'dark' ? '☀️' : '🌙';
        }

        // 选择框架
        function selectFramework(framework) {
            // 更新卡片状态
            document.querySelectorAll('.framework-card').forEach(card => {
                card.classList.remove('active');
            });
            event.target.closest('.framework-card').classList.add('active');
            
            // 显示对应的知识树
            document.querySelectorAll('.knowledge-tree').forEach(tree => {
                tree.classList.remove('active');
            });
            
            currentFramework = framework;
            const treeId = framework + '-tree';
            const tree = document.getElementById(treeId);
            if (tree) {
                tree.classList.add('active');
            }
        }

        // 显示题目
        function showQuestions(framework, module) {
            questions = mockQuestions[framework]?.[module] || [];
            renderQuestions();
        }

        // 渲染题目列表
        function renderQuestions() {
            const container = document.getElementById('question-list');
            
            if (questions.length === 0) {
                container.innerHTML = `
                    <div class="empty-state">
                        <div class="empty-icon">📝</div>
                        <div class="empty-text">暂无题目</div>
                        <div class="empty-desc">请选择知识模块查看题目</div>
                    </div>
                `;
                return;
            }

            container.innerHTML = questions.map(q => `
                <div class="question-item">
                    <div class="question-header" onclick="toggleAnswer(${q.id})">
                        <div class="question-title">${q.question}</div>
                        <span class="question-type">${q.type}</span>
                        <div class="question-actions">
                            <button class="action-btn ${favorites.includes(q.id) ? 'favorited' : ''}" 
                                    onclick="toggleFavorite(${q.id}, event)" 
                                    title="${favorites.includes(q.id) ? '取消收藏' : '收藏'}">
                                ${favorites.includes(q.id) ? '❤️' : '🤍'}
                            </button>
                        </div>
                    </div>
                    <div class="question-answer" id="answer-${q.id}">
                        ${q.answer}
                    </div>
                </div>
            `).join('');
        }

        // 切换答案显示
        function toggleAnswer(questionId) {
            const answer = document.getElementById(`answer-${questionId}`);
            if (answer) {
                answer.classList.toggle('show');
            }
        }

        // 切换收藏状态
        function toggleFavorite(questionId, event) {
            event.stopPropagation();
            
            const index = favorites.indexOf(questionId);
            if (index > -1) {
                favorites.splice(index, 1);
            } else {
                favorites.push(questionId);
            }
            
            localStorage.setItem('favorites', JSON.stringify(favorites));
            updateFavoritesDisplay();
            renderQuestions();
        }

        // 显示问答模式
        function showQAMode(mode) {
            currentQAMode = mode;
            
            // 更新按钮状态
            document.querySelectorAll('.qa-btn').forEach(btn => {
                btn.classList.remove('active');
            });
            event.target.classList.add('active');
            
            if (mode === 'questions') {
                document.getElementById('question-list').style.display = 'block';
                document.getElementById('favorites-list').style.display = 'none';
                renderQuestions();
            } else {
                document.getElementById('question-list').style.display = 'none';
                document.getElementById('favorites-list').style.display = 'block';
                renderFavorites();
            }
        }

        // 渲染收藏列表
        function renderFavorites() {
            const container = document.getElementById('favorites-list');
            
            if (favorites.length === 0) {
                container.innerHTML = `
                    <div class="empty-state">
                        <div class="empty-icon">❤️</div>
                        <div class="empty-text">暂无收藏</div>
                        <div class="empty-desc">收藏喜欢的题目，方便随时复习</div>
                    </div>
                `;
                return;
            }

            // 获取收藏的题目
            const favoriteQuestions = [];
            Object.values(mockQuestions).forEach(framework => {
                Object.values(framework).forEach(module => {
                    module.forEach(question => {
                        if (favorites.includes(question.id)) {
                            favoriteQuestions.push(question);
                        }
                    });
                });
            });

            container.innerHTML = favoriteQuestions.map(q => `
                <div class="favorite-item">
                    <div class="favorite-title">${q.question}</div>
                    <div class="favorite-answer">${q.answer}</div>
                    <div class="favorite-actions">
                        <span class="favorite-date">收藏于 ${new Date().toLocaleDateString()}</span>
                        <button class="remove-favorite" onclick="removeFavorite(${q.id})">移除</button>
                    </div>
                </div>
            `).join('');
        }

        // 移除收藏
        function removeFavorite(questionId) {
            const index = favorites.indexOf(questionId);
            if (index > -1) {
                favorites.splice(index, 1);
                localStorage.setItem('favorites', JSON.stringify(favorites));
                updateFavoritesDisplay();
                renderFavorites();
            }
        }

        // 更新收藏显示
        function updateFavoritesDisplay() {
            const favoriteBtn = document.querySelector('.qa-btn[onclick*="favorites"]');
            if (favoriteBtn) {
                const count = favorites.length;
                favoriteBtn.textContent = count > 0 ? `我的收藏 (${count})` : '我的收藏';
            }
        }

        // 添加触摸支持
        document.addEventListener('touchstart', function(e) {
            e.target.classList.add('touch-active');
        });

        document.addEventListener('touchend', function(e) {
            setTimeout(() => {
                e.target.classList.remove('touch-active');
            }, 150);
        });

        // 添加触摸样式
        const style = document.createElement('style');
        style.textContent = `
            .touch-active {
                transform: scale(0.95);
                opacity: 0.8;
            }
        `;
        document.head.appendChild(style);
    </script>
</body>
</html>
